<template>
  <div>
    <!-- Header区域 -->
    <head-nev msg="黑马优购" :backState="true"></head-nev>
    <!-- 地址列表 -->
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [
        // {
        //   isDefault: true,
        //   id: '1',
        //   name: '张三',
        //   tel: '13000000000',
        //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
        // },
        // {
        //   id: '2',
        //   name: '李四',
        //   tel: '1310000000',
        //   address: '浙江省杭州市拱墅区莫干山路 50 号'
        // }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      if (!window.localStorage.getItem('arr')) {
        return
      } else {
        this.list = JSON.parse(window.localStorage.getItem('arr'))
        if (!window.localStorage.getItem('chosenAddressId')) {
          let defaultNum = this.list.findIndex(item => item.isDefault === true)
          this.chosenAddressId = this.list[defaultNum].id
          window.localStorage.setItem('chosenAddressId', this.chosenAddressId)
        } else {
          this.chosenAddressId = parseInt(
            window.localStorage.getItem('chosenAddressId')
          )
        }
      }
    },
    // 新增按钮
    onAdd() {
      this.$router.push({
        path: '/address/edit',
        query: { editType: 'add' }
      })
    },
    // 修改按钮
    onEdit(item, index) {
      this.$router.push({
        path: '/address/edit',
        query: { editType: 'modify', chosenAddress: item }
      })
    },
    onSelect(item) {
      window.localStorage.setItem('chosenAddressId', item.id)
    }
  }
}
</script>

<style scoped>
</style>